<!-- views/guild/Guild.vue -->
<template>
  <div class="guild-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="公会信息" name="guild-manage"></el-tab-pane>
      <el-tab-pane label="公会成员" name="guild-member"></el-tab-pane>
      <el-tab-pane label="公会公告" name="guild-notice"></el-tab-pane>
      <el-tab-pane label="公会活动" name="guild-activity"></el-tab-pane>
      <el-tab-pane label="公会贡献" name="guild-contribution"></el-tab-pane>
      <el-tab-pane label="公会外交" name="guild-diplomacy"></el-tab-pane>
      <el-tab-pane label="公会聊天" name="guild-chat"></el-tab-pane>
    </el-tabs>
    <router-view @page-changed="updateActiveTab"></router-view>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const activeTab = ref('guild-manage');

const handleTabClick = (tab) => {
  router.push({ name: tab.name });
};

const updateActiveTab = (payload) => {
  if (payload.pageName) {
    // 将页面名称映射到路由名称
    const pageToRouteMap = {
      '公会信息': 'guild-manage',
      '公会成员': 'guild-member',
      '公会公告': 'guild-notice',
      '公会活动': 'guild-activity',
      '公会贡献': 'guild-contribution',
      '公会外交': 'guild-diplomacy',
      '公会聊天': 'guild-chat'
    };

    const routeName = pageToRouteMap[payload.pageName];
    if (routeName) {
      activeTab.value = routeName;
    }
  }
};

onMounted(() => {
  // 初始化当前活动标签页
  if (route.name) {
    activeTab.value = route.name;
  }
});
</script>

<style scoped>
.guild-container {
  padding: 15px;
}
</style>